<template>
  <div
    style="
      min-height: 630px;
      padding: 3px;
      background-color: rgba(255, 255, 255, 1);
    "
  >
    <Row>
      <div class="toolbar">
        <div v-if="Validation.check(Resources.VERSION_ADD)">
          <Button type="primary" icon="md-add" @click="toAdd()"
            >添加版本</Button
          >
        </div>
        <!-- <Input v-model="bloc.model.accountName" style="width:200px;margin-right:5px" placeholder="发布人"/> -->
        <!-- <Input v-model="bloc.model.versions" style="width:200px;margin-right:5px" placeholder="插件版本"/> -->
        <Select v-model="bloc.model.upgradeType" style="  width:200px;margin-right:5px" placeholder="产品类型">
          <Option v-for="(item) in bloc.productList" :value="item" :key="item">{{ item }}</Option>
        </Select>
        <Button icon="ios-search" type="primary" style="margin-right:5px"
                @click="bloc.load(bloc.paged.pageIndex, bloc.paged.pageSize,idx)">查询
        </Button>
        <!-- <Button icon="ios-refresh" @click="reset">重置</Button> -->
      </div>
    </Row>
    <div style="margin-top: 20px">
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="removeItem(row)"
              type="warning"
              v-if="Validation.check(Resources.VERSION_DELETE)"
              >删除
            </Button>
            <!-- <Button size="small" @click="modifyItem(row, 1)" type="info"
              >详情
            </Button> -->
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="(val) => bloc.load(val, bloc.paged.pageSize, idx)"
            @on-page-size-change="(val) => bloc.load(bloc.paged.pageIndex, val, idx)"
          />
        </slot>
      </Table>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import { VersionBloc } from '@/view/device/Edit/version/VersionBloc';
import ChangeAccountPwd from '@/component/ChangeAccountPwd.vue';
import { formatDate } from '@/base/util/Dates';
import { Validation } from '@/base/Validation';
import { Resources } from '@/base/Resources';
const columns = [
  {
    title: 'ID',
    key: 'id',
    align: 'left',
    width: 180,
    tooltip: true
  },
  {
    title: '产品类型',
    key: 'upgradeType',
    align: 'left',
    width: 80,
    tooltip: true
  },
  {
    title: '版本号',
    key: 'versionName',
    align: 'left',
    width: 80,
    tooltip: true
  },
  {
    title: '版本编码',
    key: 'versionCode',
    align: 'left',
    width: 80,
    tooltip: true
  },

  {
    title: '更改状态',
    key: 'updateStatus',
    render: (h: any, params: any) => {
       return h('span', {
             domProps: {
                 innerText: params.row.updateStatus === 1 ? '不强制更新' : '强制更新'
             }
       });
    },
    align: 'left',
    width: 150,
    tooltip: true
  },
  {
    title: '更改内容',
    key: 'modifyContent',
    align: 'left',
    tooltip: true
  },
  {
    title: '下载地址',
    align: 'left',
    key: 'downloadUrl',
    tooltip: true
  },
  {
    title: 'app大小',
    align: 'left',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText:
            (parseInt(params.row.apkSize) / 1024 / 1024).toFixed(2) + 'MB'
        }
      });
    },
    width: 120,
    tooltip: true
  },
  {
    title: '创建时间',
    render: (h: any, params: any) => {
      return h('span', {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            'yyyy-MM-dd hh:mm:ss'
          )
        }
      });
    },
    align: 'left',
    width: 180,
    tooltip: true
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    slot: 'action',
    width: 47 * 3,
    fixed: 'right'
  }
];
@Component({ components: { ChangeAccountPwd } })
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next((vm) => {
      vm.bloc
        .load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize, vm.idx)
        .catch((e) => {
          vm.$Message.error('操作错误');
        });
    });
  }

  bloc: VersionBloc = new VersionBloc();
  columns = columns;
  Validation = Validation;
  Resources = Resources;

  get idx() {
    return Number(this.$route.params.id);
  }

  removeItem(row) {
    this.$Modal.confirm({
      title: '提示',
      content: '确认删除后将无法恢复！还要继续吗？',
      okText: '删除',
      cancelText: '取消',
      onOk: () => {
        console.log(row);
        this.bloc.removeItem(row).then((value) => {
          this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.idx);
        });
      }
    });
  }
  toAdd() {
    this.$router.push({ path: '/device/nav/add/version/' + this.idx});
  }
  reset() {
    this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize, this.idx);
  }
}
</script>
<style lang="less" scoped>
</style>
